<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_自定义JS对象</title>
</head>
<body>
    <table border="1px">
        <caption>商品表</caption>
        <tr>
            <th>商品标题</th>
            <th>商品价格</th>
            <th>商品库存</th>
        </tr>
    </table>
<script>
    //定义数组模拟服务器获取到商品数据
    let productArr = [
        {title:'小米14',price:8000,num:200},
        {title:'华为P50',price:9000,num:100},
        {title:'苹果14',price:10000,num:50},
        {title:'OPPO Reno8',price:5000,num:300},
        {title:'一加8',price:6000,num:250},
        {title:'vivo Y20',price:3000,num:400}
    ];
    let tableE = document.querySelector('table');
    function f1() {
        document.addEventListener('DOMContentLoaded', f1);
        for (let o of productArr){
            let trE = document.createElement('tr');
            for (let p in o){
                let tdE = document.createElement('td');
                tdE.innerHTML = o[p];
                trE.append(tdE);
            }
            tableE.append(trE);
        }
    }
    document.addEventListener('DOMContentLoaded', f1);


    //1.定义一个自带属性与方法的JS对象
    let p1 = {
        name:'张三',
        age:18,
        say:function () {
            console.log('我叫'+this.name+',今年'+this.age+'岁');
        },
        run:function () {
            console.log(this.name+'在跑步');
        }
    };
    console.log(p1);
    console.log(p1.name);
    console.log(p1.age);
    p1.say();
    p1.run();

    //2.先定义一个空对象,再动态给对象设置属性和方法
    let p2 = {};
    p2.name = '李四';
    p2.age = 20;
    p2.say = function () {
        console.log('我叫'+this.name+',今年'+this.age+'岁');
    };
    p2.run = function () {
        console.log(this.name+'在跑步');
    };
    console.log(p2);
    console.log(p2.name);
    console.log(p2.age);
    p2.say();
    p2.run();
    p1.gender = '男';
    console.log(p1);

</script>
</body>
</html>